<!-- src/components/business/LoginButton.vue -->
<template>
    <el-button type="primary" size="large" class="button" :loading="loading" @click="handleClick" round>
        <slot></slot>
    </el-button>
</template>

<script setup lang="ts">
import { ElButton } from 'element-plus'

// 定义组件的属性
interface Props {
    loading?: boolean
}

// 定义组件的事件
interface Emits {
    (e: 'click'): void
}

// 接收属性
withDefaults(defineProps<Props>(), {
    loading: false
})

// 定义事件发射器
const emit = defineEmits<Emits>()

// 处理点击事件
const handleClick = () => {
    emit('click')
}
</script>

<style lang="scss" scoped>
.button {
    width: 100%;
    margin-top: 10px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    height: 46px;
    background: linear-gradient(120deg, #ff9a00, #ff6b00);
    border: none;
    box-shadow: 0 4px 15px rgba(255, 154, 0, 0.4);
    transition: all 0.3s;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 154, 0, 0.5);
    }
}
</style>